<template>
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>实体数量统计</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="getDatas"><i class="el-icon-refresh"></i></el-button>
        </div>
      <div id="showstamain" style="width: auto;height:300px;"></div>
     </el-card>
      <!-- <input type="button" value="click to get datas" @click='getDatas'>
      <input type="button" value="click to get table" @click='getTable'> -->
    </div>
</template>
<script>
import axios from 'axios'
import echarts from 'echarts'
export default {
  name: 'EntityShow',
  data () {
    return {
      target: 'http://127.0.0.1:8001/statistics',
      tableItems: ['人物', '家族', '城堡'],
      tableNums: [0, 0, 0]
    }
  },
  mounted () {
    this.getDatas()
  },
  methods: {
    getDatas () {
      var that = this
      //   console.log('yes i sent')
      axios.get(that.target + '/character?limit=10000').then(function (ret) {
        // console.log(ret.data.results.bindings.length)
        that.tableNums[0] = ret.data.results.bindings.length
        that.getTable()
      })
      axios.get(that.target + '/house?limit=10000').then(function (ret) {
        // console.log(ret.data.results.bindings.length)
        that.tableNums[1] = ret.data.results.bindings.length
        that.getTable()
      })
      axios.get(that.target + '/castle?limit=10000').then(function (ret) {
        // console.log(ret.data.results.bindings.length)
        that.tableNums[2] = ret.data.results.bindings.length
        that.getTable()
      })
    },
    getTable () {
      var that = this
      var myChart = echarts.init(document.getElementById('showstamain'))
      myChart.setOption({
        title: {
          text: '人物、家族、城堡数量统计'
        },
        tooltip: {},
        xAxis: {
          data: that.tableItems
        },
        yAxis: {},
        series: [{
          name: '数量',
          type: 'bar',
          data: that.tableNums
        }]
      })
    }
  }
}
</script>
